<template>
  <div id="rtcPlayer">
    <video id='webRtcPlayerBox' class='webRtcPlayerBox' autoplay muted style="text-align:left;">
    </video>
  </div>
</template>

<script>
let webrtcPlayer = null;
export default {
  name: 'rtcPlayer',
  data () {
    return {
      timer: null,
      videoUrl: 'http://192.168.1.225:8101/index/api/webrtc?app=test1&stream=test1&type=play'
    };
  },
  mounted () {
    let paramUrl = decodeURIComponent(this.$route.params.url)
    this.$nextTick(() => {
      if (typeof (this.videoUrl) == "undefined") {
        this.videoUrl = paramUrl;
      }
      console.log("初始化时的地址为: " + this.videoUrl)
      this.play(this.videoUrl)
    })
  },
  watch: {
    videoUrl (newData, oldData) {
      this.pause();
      this.play(newData);
    },
    immediate: true
  },
  methods: {
    play: function (url) {
      console.log('id->', document.getElementById(`webRtcPlayerBox`));
      console.log('class->', document.getElementsByClassName(`webRtcPlayerBox`)[0]);
      webrtcPlayer = new ZLMRTCClient.Endpoint({
        // element: document.getElementsByClassName(`webRtcPlayerBox`)[this.claId],// video 标签
        element: document.getElementById(`webRtcPlayerBox`),// video 标签
        debug: true,// 是否打印日志
        zlmsdpUrl: url,//流地址
        simulecast: false,
        useCamera: false,
        audioEnable: true,
        videoEnable: true,
        recvOnly: true,
        usedatachannel: false,
      })
      webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR, (e) => {// ICE 协商出错
        console.error('ICE 协商出错')
        this.eventcallbacK("ICE ERROR", "ICE 协商出错")
      });

      webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS, (e) => {//获取到了远端流，可以播放
        console.log('播放成功', e.streams)
        this.eventcallbacK("playing", "播放成功")
        const videoElement = document.getElementById('webRtcPlayerBox');
        videoElement.srcObject = e.streams[0];
        videoElement.play().catch(error => {
          console.error('自动播放失败：', error);
        });
      });

      webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED, (e) => {// offer anwser 交换失败
        console.error('offer anwser 交换失败', e)
        this.eventcallbacK("OFFER ANSWER ERROR ", "offer anwser 交换失败")
        if (e.code == -400 && e.msg == "流不存在") {
          console.log("流不存在")
          this.timer = setTimeout(() => {
            this.webrtcPlayer.close();
            this.play(url)
          }, 100)

        }
      });
      webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM, (s) => {// 获取到了本地流
        // document.getElementById('selfVideo').srcObject=s;
        this.eventcallbacK("LOCAL STREAM", "获取到了本地流")
      });

    },
    pause: function () {
      if (webrtcPlayer != null) {
        webrtcPlayer.close();
        webrtcPlayer = null;
      }

    },
    eventcallbacK: function (type, message) {
      console.log("player 事件回调")
      console.log(type)
      console.log(message)
    }
  },
  unmounted () {
    clearTimeout(this.timer);
  },
}
</script>

<style>
.LodingTitle {
  min-width: 70px;
}

#rtcPlayer {
  width: 100%;
}

#webRtcPlayerBox {
  width: 100%;
  max-height: 56vh;
  background-color: #000;
}
</style>
